<template>
  <div>
    <div class="search">
      <router-link class="link" to="/search">
        <van-icon class="icon" name="search" size="14" />
        <div class="search-text">商品搜索,共239款好物</div>
      </router-link>
    </div>
    <div class="content">
      <div class="sidebar">
        <van-sidebar v-model="activeKey" @click="currentOne">
          <van-sidebar-item
            class="sidebar-item"
            v-for="item in categoryList"
            @click="onclick(item.id)"
            :key="item.id"
            :title="item.name"
          />
        </van-sidebar>
      </div>
      <div class="column">
        <div class="banner">
          <img :src="currentOne.banner_url" alt="" />
        </div>
        <div class="text">
          <span>—</span> {{ currentOne.name }}分类 <span>—</span>
        </div>
        <div class="box">
          <div
            class="main"
            v-for="item in currentOne.subList"
            :key="item.id"
            @click="toDetail(item.id)"
          >
            <img :src="item.wap_banner_url" alt="" />
            <p>{{ item.name }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { indexaction, currentaction } from "@/api/category/index.js";
export default {
  data() {
    return {
      activeKey: 0,
      categoryList: [],
      currentOne: {},
    };
  },
  created() {
    indexaction().then((res) => {
      this.categoryList = res.categoryList;
      console.log(res);
      currentaction({ id: res.categoryList[this.activeKey].id }).then((res) => {
        this.currentOne = res.data.currentOne;
        console.log(res);
      });
    });
  },
  methods: {
    toDetail(id) {
      this.$router.push({ path: "/main", query: { id: id } });
    },
    onclick(id) {
      currentaction({ id: id }).then((res) => {
        this.currentOne = res.data.currentOne;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.search {
  width: 375px;
  line-height: 44px;

  .link {
    padding: 7px 100px;
    background-color: #ededed;
    border-radius: 5px;
    .icon {
      margin-right: 5px;
    }
    .search-text {
      color: #000;
      display: inline-block;
    }
  }
}
.content {
  width: 375px;
  display: flex;
  .sidebar {
    margin-top: 10px;
    width: 80px;
    .sidebar-item {
      padding: 10px 0;
    }
  }
  .column {
    width: 260px;
    padding: 0 15px;
    .banner {
      margin-top: 10px;
      img {
        width: 260px;
        height: 95px;
      }
    }
    .text {
      padding: 25px 0;
    }
    .box {
      width: 260px;
      display: flex;
      flex-wrap: wrap;
      .main {
        width: 86px;
        margin-bottom: 10px;
        img {
          width: 72px;
          margin: 0 auto;
        }
      }
    }
  }
}
</style>